<template>
  <div class="wrapper">
    <el-upload
      drag
      accept="text/csv"
      :disabled="isUpload"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="handleFile"
      v-loading="loading"
      ref="uploadRef"
    >
      <template v-if="!isUpload">
        <el-icon class="el-icon--upload"><component is="el-icon-upload-filled" /></el-icon>
        <div class="el-upload__text">拖拽上传文件，或 <em>点此上传</em></div>
      </template>
      <template v-else>
        <el-icon class="el-icon--upload success"><component is="el-icon-success-filled" /></el-icon>
        <div class="el-upload__text">文件已成功读取</div>
      </template>
    </el-upload>

    <el-alert class="mt-20" title="使用说明" type="warning" :center="false" :closable="false">
      <p>1. 导入文件后，右上角下拉框可以切换我方/敌方，默认是我方数据</p>
      <p>2. KDA：(击杀 + (1 / 3 * 助攻)) / (死亡数 + 1)</p>
      <p>3. 转换系数：铁衣-控制总数*20000/承受伤害，素问-总治疗值/承受伤害，其他DPS-（人伤+塔伤）/承受伤害</p>
      <p>4. 伤害效率：人伤 / (击杀 + 助攻) / 10000</p>
      <p>
        5.
        活跃度：在总数据、团总数据、职业数据表中，如果个人承伤小于平均承伤的60%，则会将该行数据的第一列标红，该活跃数据仅用于参考，具体是否活跃应结合其他数据综合判断
      </p>
      <p>6. 参团率：(本人击杀 + 助攻) / 击杀总数</p>

      <el-divider></el-divider>

      <p>职业排序说明：</p>
      <p>铁衣：控制 > 濒死</p>
      <p>奶妈：奶量 > 战复 > 濒死 > 参团率</p>
      <p>九零：总伤 > 伤害效率 > 转换系数 > 参团率 > 青灯</p>
      <p>鸿音：总伤 > 伤害效率 > 转换系数 > 参团率 > 奶量</p>
      <p>其他DPS：总伤 > 伤害效率 > 转换系数 > 参团率</p>
    </el-alert>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import * as XLSX from "xlsx";
import { useStore } from "vuex";
import { computedAllData } from "@/utils";

const store = useStore();
const isUpload = computed(() => store.state.isUpload);
const loading = ref(false);

/** 上传文件 */
const handleFile = async (e) => {
  if (e) {
    loading.value = true;
    const csvData: any = await parseCSV(e.raw);
    if (csvData) {
      const data = computedAllData(csvData);
      store.commit("loadDatas", data);
    }
    loading.value = false;
  }
};
/** 转换csv为array */
const parseCSV = (file) => {
  return new Promise((resolve, reject) => {
    try {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = e.target.result;
        const workbook = XLSX.read(data, { type: "binary" });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        // 这里的json就是解析后的数组，可以根据需要进一步处理或使用
        resolve(json);
      };
      reader.readAsBinaryString(file);
    } catch (error) {
      reject(error);
    }
  });
};
</script>

<style scoped lang="scss">
.success {
  color: var(--el-color-success);
}
</style>
